<template>
  <view class="content">
    <Tabs :tab-list="tabList" :current-tab="current" @tabs="tabsChange">
      <TabPane>
        <view class="all-order">
          <view class="all-content">
            <img
              src="https://lmg.jj20.com/up/allimg/1011/0Z31G43007/1FZ3143007-7-1200.jpg"
              style="width:72px;height:44px"/>
            <view>
              <view class="all-title">Apple MacBook Pro 14英寸 深空灰</view>
              <view class="all-count">1台</view>
              <view class="all-price">
                <view>￥12599</view>
                <view>×1</view>
              </view>
            </view>
          </view>
          <view class="total">共1件 合计：
            <text class="value">￥12599</text>
          </view>
          <view class="btn" style="display:flex">
            <u-button type="warning" shape="circle" size="normal" text="查看物流"/>
            <u-button type="primary" shape="circle" size="normal" text="订单详情"/>
          </view>
        </view>
      </TabPane>
      <TabPane>
        <view>待发货</view>
      </TabPane>
      <TabPane>
        <view>
          <h1>此处为自定义内容</h1>
        </view>
      </TabPane>
    </Tabs>
  </view>
</template>

<script>
import Tabs from '@/components/Tabs/tabs.vue'
import TabPane from '@/components/Tabs/tabPane.vue'

export default {
  components: {
    Tabs,
    TabPane
  },

  data() {
    return {
      title: 'Hello',
      current: 0,
      show: false,
      value1: Number(new Date()),
      tabList: [
        {
          name: '全部'
        },
        {
          name: '待发货'
        },
        {
          name: '待收货'
        }, {
          name: '退货'
        }
      ]
    }
  },
  onLoad() {

  },
  methods: {
    tabsChange(index) {
      this.current = index
      console.log(this.current)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.all {
  &-order {
    padding: 14px;
    box-sizing: border-box;

    .total {
      text-align: right;

      .value {
        font-size: 16px;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #1762F2;
        line-height: 26px;
      }
    }

    .btn {
      width: 60%;
      float: right;

      :deep(.u-button) {
        &:first-of-type {
          margin-right: 10px;
        }
      }
    }

  }

  &-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  &-title {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #252631;
    line-height: 24px;
  }

  &-count {
    font-size: 11px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #969EB0;
    line-height: 16px;
    letter-spacing: 3px;
  }

  &-price {
    display: flex;
    justify-content: space-between;
  }
}
</style>
